<template>
    <div class="app-container">
        <el-dialog :close-on-click-modal="false" v-model="open" append-to-body width="26%">
            <template #header>
                <div style="cursor: move;">
                    库房单位信息：<span class="mr10" style="color:#FF8C00">{{ row.storageName }}</span>
                    单位性质：<span class="mr10" style="color:#FF8C00">{{
                        dictDataMap['material_storage_dept_type'][row.storageType] ?
                            dictDataMap['material_storage_dept_type'][row.storageType].dictLabel : ''
                    }}</span><br/>
                    门诊住院标识：<span class="mr10" style="color:#FF8C00">{{
                        dictDataMap['clinic_or_visit'][row.clinicOrVisit] ?
                            dictDataMap['clinic_or_visit'][row.clinicOrVisit].dictLabel :
                            ''
                    }}</span><br/> 
                    <dept-tree ref="deptTreeRef" :default-checked-keys="defaultCheckedKeys" :height="'450px'"
                                   :org-id="row.orgId"
                                   :show-checkbox="true"/>
                   
                </div>
            </template>
            <template #footer>
            <span class="dialog-footer">
                    <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import {addMaterialStorageVsDept, listMaterialStorageVsDept} from '@/api/material/materialStorageVsDept'
import {useDictStoreHook} from "@/store/modules/dict";

const dictStore = useDictStoreHook();
const dictDataMap = ref<any>(dictStore.isTypeGetData('material_storage_dept_type', 'clinic_or_visit'))
// 是否显示弹出层
const open = ref(false)
const row = ref<any>({})
const buttonLoading = ref(false)
// 已选中的科室树节点
const defaultCheckedKeys = ref([])
const form = ref<any>({})
const deptTreeRef = ref() 

// 取消按钮
function cancel() {
    defaultCheckedKeys.value = []
    open.value = false;
    form.value.storageId = ''
    form.value.deptIds = []
}

/** 显示分配科室弹出框 */
function storageVsDeptShow(rowInfo) {
    nextTick(() => {
        open.value = true
        row.value = rowInfo 
        listStorageVsDeptFun()
        form.value.storageId = rowInfo.storageId
        form.value.orgId = rowInfo.orgId
        form.value.orgName = rowInfo.orgName
    })
}

/** 获取已分配的科室 */
function listStorageVsDeptFun() {
    let param = {
        storageId: row.value.storageId,
        orgId: row.value.orgId, 
    }
    listMaterialStorageVsDept(param).then((res: any) => {
        deptTreeRef.value.clearTheSelection()
        let deptIds = [] as any
        res.data.forEach((item: any) => {
            deptIds.push(item.deptId)
        })
        nextTick(() => {
            defaultCheckedKeys.value = deptIds
        })

    })
}

function submitForm() {
    form.value.deptIds = deptTreeRef.value.getCheckedKeys()
    if (form.value.deptIds.length < 1) {
        return ElMessage.error("请勾选科室后保存")
    }
    addMaterialStorageVsDept(form.value).then(_res => {
        ElMessage.success("科室分配成功")
        cancel()
    })
} 

defineExpose({
    storageVsDeptShow
})
</script>

<script lang="ts">
export default {
    name: "storageVsDept"
}
</script>

<style scoped></style>
